
//slideBox1
// 获取所有的 li 元素
let items1 = document.querySelectorAll('.slideBox1 .bd > li');
let hdItems1 = document.querySelectorAll('.slideBox1 .hd > li');  // 获取 hd 中的 li 元素

// 当前显示的图片索引
let currentIndex1 = 0;

// 设置自动切换的间隔时间（例如每 2 秒切换一次）
const intervalTime1 = 2000;

let prevBtn = document.querySelector('.slideBox1 .prev');
let nextBtn = document.querySelector('.slideBox1 .next');

let slideInterval1; // 定时器变量

prevBtn.onclick = function () {
    currentIndex1--;
    if (currentIndex1 < 0) {
        currentIndex1 = items1.length - 1;
    }
    showCurrentImage1();
}

nextBtn.onclick = function () {
    currentIndex1++;
    if (currentIndex1 >= items1.length) {
        currentIndex1 = 0;
    }
    showCurrentImage1();
}

// 函数：显示当前索引的图片
function showCurrentImage1() {
    items1.forEach(item => {
        item.style.display = 'none';
    });

    items1[currentIndex1].style.display = 'flex';

    hdItems1.forEach(item => {
        item.classList.remove('on');
    });
    hdItems1[currentIndex1].classList.add('on');
}

// 设置自动轮播
function startSlideShow1() {
    // 初始化显示第一张图片
    showCurrentImage1();

    // 设置定时器来切换图片
    slideInterval1 = setInterval(() => {
        // 切换到下一张图片
        currentIndex1 = (currentIndex1 + 1) % items1.length;  // 循环从头开始
        showCurrentImage1();
    }, intervalTime1);
}

// 停止自动轮播
function stopSlideShow1() {
    clearInterval(slideInterval1);
}

// 启动轮播
startSlideShow1();

// 鼠标悬停事件，停止轮播
document.querySelector('.slideBox1').addEventListener('mouseenter', stopSlideShow1);

// 鼠标离开事件，重新启动轮播
document.querySelector('.slideBox1').addEventListener('mouseleave', startSlideShow1);

// 给 .hd 中的 li 添加鼠标悬停事件
hdItems1.forEach((item, index) => {
    item.addEventListener('mouseenter', function () {
        // 当鼠标悬停在某个 li 上时，更新 currentIndex 并显示对应的图片
        currentIndex1 = index;
        showCurrentImage1();
    });
});


//slideBox2
// 获取所有的 li 元素
let items2 = document.querySelectorAll('.slideBox2 .bd > li');
let hdItems2 = document.querySelectorAll('.slideBox2 .hd > li');  // 获取 hd 中的 li 元素

// 当前显示的图片索引
let currentIndex2 = 0;

const intervalTime2 = 2000;

let slideInterval2; // 定时器变量

// 函数：显示当前索引的图片
function showCurrentImage2() {
    items2.forEach(item => {
        item.style.display = 'none';
    });

    items2[currentIndex2].style.display = 'flex';

    hdItems2.forEach(item => {
        item.classList.remove('on');
    });
    hdItems2[currentIndex2].classList.add('on');
}

// 设置自动轮播
function startSlideShow2() {
    // 初始化显示第一张图片
    showCurrentImage2();

    // 设置定时器来切换图片
    slideInterval2 = setInterval(() => {
        // 切换到下一张图片
        currentIndex2 = (currentIndex2 + 1) % items2.length;  // 循环从头开始
        showCurrentImage2();
    }, intervalTime2);
}

// 停止自动轮播
function stopSlideShow2() {
    clearInterval(slideInterval2);
}

// 启动轮播
startSlideShow2();

// 鼠标悬停事件，停止轮播
document.querySelector('.slideBox2').addEventListener('mouseenter', stopSlideShow2);

// 鼠标离开事件，重新启动轮播
document.querySelector('.slideBox2').addEventListener('mouseleave', startSlideShow2);

// 给 .hd 中的 li 添加鼠标悬停事件
hdItems2.forEach((item, index) => {
    item.addEventListener('mouseenter', function () {
        // 当鼠标悬停在某个 li 上时，更新 currentIndex 并显示对应的图片
        currentIndex2 = index;
        showCurrentImage2();
    });
});

/**
 * 通过Ajax技术异步获取数据
 */
(function fetchData() {
    //日期处理
    function getDate(ms) {
        let format = new Date(ms);
        let month = (format.getMonth() + 1).toString().padStart(2, '0');
        let date = format.getDate().toString().padStart(2, '0');
        return `${month}-${date}`;
    }
    //标题处理
    function getString(str) {
        return str;
    }

    function cutString(str, displaylen) {
        if (str.length * 2 <= displaylen) {
            return str;
        }

        let strlen = 0;
        let result = "";

        for (let i = 0; i < str.length; i++) {
            // 判断字符是单字节还是双字节
            let charCode = str.charCodeAt(i);
            if (charCode > 128) {
                strlen += 2; // 双字节字符计为2
            } else {
                strlen += 1; // 单字节字符计为1
            }

            // 如果当前长度加上即将添加的字符长度超过 displaylen，则停止
            if (strlen > displaylen) {
                return result + '...';
            }

            result += str[i];
        }

        return result + '...'; // 如果循环结束仍未达到 displaylen，也添加省略号
    }

    //Axios库
    let target = document.querySelector('article.informBox1 ul');
    target.innerHTML = '';//清除原有数据
    let url = './data/db.json';//数据源
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    xhr.onload = function () {
        if (xhr.status === 200) {
            let res = JSON.parse(xhr.responseText);
            // console.log("total -->", res.total);
            let data = res.news;
            for (let i = 0; i < data.length; i++) {
                target.innerHTML += `
                <li> \n
                    <a href="">
                        ${cutString(getString(data[i].title), 25)}<span>${getDate(data[i].date)}</span>
                    </a>
                </li>\n
                `;
            }
        }
    }
    xhr.onerror = function () {
        console.log("error");
    }

})(); 